<%--
  Created by IntelliJ IDEA.
  User: Teacher
  Date: 2025/9/12
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商品列表</title>
    <script>
        function show(id, e) {
            document.getElementById("d").style.display = "block";
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let result = xhr.responseText;
                    // console.log(result);
                    let product = eval("(" + result + ")");
                    console.log(product);
                    document.getElementById("d").style.left = e.clientX;
                    document.getElementById("d").style.top = e.clientY;
                    document.getElementById("s1").innerHTML = product.id;
                    document.getElementById("s2").innerHTML = product.name;
                    document.getElementById("s3").innerHTML = product.price;
                }
            };
            xhr.open("get", "${pageContext.request.contextPath}/findById.product?id=" + id)
            xhr.send(null);
        }

        function hide() {
            document.getElementById("d").style.display = "none";
        }
    </script>
</head>
<body>
<!--
    需求一:查询所有商品信息
    此处使用传统的web请求方式进行查询
    将数据库中所有商品的名称展示到列表中
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li onmouseover="show(${product.id},event)" onmouseout="hide()">${product.name}</li>
    </c:forEach>
</ul>
<hr>
<!--
    需求二:展示商品详情
    初始情况下,下面的div是隐藏的
    当用户鼠标悬停在某一个商品名称上的时候
        进入数据库根据商品编号查询该商品的详细信息,在div中展示出来
        在后端Java中查询出来的是一个Java对象,将其改造成JSON格式的字符串返回到js中
        在js中通过eval方法将其转换成JSON对象
        且此时的div会在鼠标指针边上展示
    当鼠标离开商品区域,则div隐藏起来
-->
<div id="d" style="background-color: #dddddd;padding: 10px;width: 260px;display: none;position: absolute;">
    商品编号:<span id="s1">1</span><br>
    商品名称:<span id="s2">aaa</span><br>
    商品单价:<span id="s3">10.0</span><br>
</div>
</body>
</html>
